<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>相机控制器</title>
	<script type="text/javascript" src="three.min.js"></script>
	<script type="text/javascript" src="OrbitControls.js"></script>
	<style type="text/css">
		body{
			text-align: center;
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		var scene = new THREE.Scene();  //创建场景

		var geometry = new THREE.BoxGeometry(100,100,100);   //创建正方体
		var material = new THREE.MeshLambertMaterial({color:0x0000ff});
		var mesh = new THREE.Mesh(geometry,material);
		scene.add(mesh);

		var light = new THREE.PointLight(0xffffff);  //创建灯光
		light.position.set(300,400,200);
		scene.add(light);

		var camera = new THREE.PerspectiveCamera(40,800/600,1,1000);   //创建相机
		camera.position.set(200,200,200);
		camera.lookAt(scene.position);

		var renderer = new THREE.WebGLRenderer();  //渲染
		renderer.setSize(800,600);
		document.body.appendChild(renderer.domElement);
	
		renderer.render(scene,camera);

		var controls = new THREE.OrbitControls(camera);  //创建相机动画
		controls.addEventListener("change",function(){   //当捕捉到变化立即重绘
			renderer.render(scene,camera);
		});
	</script>

</body>
</html>